<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单演示</title>
</head>

<body>
    <!-- POST 与 get是两种提交数据的方式 -->
    <img src="Guatai.gif" alt="呱太" title="御坂美琴">
    <form action="#" name="my_form" method="POST">
        <!-- 相当于卡片的东西 -->
        <fieldset>
            <legend>基本信息</legend>
            <label for="turename">姓名</label>
            <!-- input: 单行文本输入框 -->
            <input type="text" name="turename" id="turename" value="<--请输入真实姓名-->">
            <br>
            <label for="sex">性别
                <label for="male">男</label>
                <!-- input：单选框 -->
                <input type="radio" name="sex" id="male" checked>
                <label for="female">女</label>
                <input type="radio" name="sex" id="female">
            </label>
            <br>
            <label for="nickname">昵称</label>
            <input type="nickname" name="nickname" id="nickname">
            <br>
            <label for="password">密码</label>
            <!-- input: 密码框 -->
            <input type="password" name="password" id="password">
        </fieldset>

        <fieldset>
            <legend>附件信息</legend>
            <!-- input： 多选框 -->
            <label>兴趣爱好
                <input type="checkbox" name="favorite[]" id="sport">运动
                <input type="checkbox" name="favorite[]" id="music">音乐
                <input type="checkbox" name="favorite[]" id="anime">动漫
            </label>
            <br>
            <!-- input: 下拉列表 -->
            <label for="university">毕业学校
                <select name="university" id="university">
                    <option selected>
                        <--请选择你的毕业学校-->
                    </option>
                    <optgroup label="全国一流大学">
                        <option value="清华">清华大学</option>
                        <option value="北大">北京大学</option>
                    </optgroup>
                    <optgroup label="省属一流大学">
                        <option value="南大">南昌大学</option>
                    </optgroup>
                    <optgroup label="地方院校">
                        <option value="九院">九江学院</option>
                    </optgroup>
                </select>
            </label>
        </fieldset>

        <fieldset>
            <legend>附件</legend>
            <!-- input: 上传文件 -->
            <input type="file" name="upload_file" id="upload_file">
            <!-- input： 隐藏域，多用于动态网页编程需要提交一些无需显示的信息 -->
            <input type="hidden" name="user" value="admin">
        </fieldset>

        <fieldset>
            <!-- 通过JS编程富文本编辑器 -->
            <legend>备注</legend>
            <!-- 多行文本输入框 -->
            <textarea name="note" id="note" cols="80" rows="10"></textarea>
        </fieldset>

        <!-- input： 提交按钮 -->
        <input type="submit" value="提交">
        <!-- input: 重置按钮 -->
        <input type="reset" value="重置">
        <!-- input: 图片按钮 -->
        <input type="image"
            src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1789448540,836075780&fm=26&gp=0.jpg" alt="提交"
            width="200" height="100">
        <br>
        <!-- input: 无默认行为的按钮 -->
        <input type="button" value="无默认行为的按钮">
        <!-- button标签来实现相同的功能，button可以使用更丰富的样式来控制 -->
        <br>
        <button type="submit">Button提交</button>
        <button type="reset">Button重置</button>
    </form>
</body>

</html>